/* 已申请职位 */
<template>
<div class="tab-content">
    <dl>
        <dt>
            <span></span>
            <span>职位名称</span>
            <span>公司名称</span>
            <span>投递反馈</span>
            <span>投递时间</span>
            <span>操作</span>
        </dt>
        <dd v-for="(item , index) in list" :key="index">
            
            <span> <input type="checkbox" v-model="checkModel" :value="item.id"> </span>
            <span>{{item.jobTitle}}</span>
            <span>{{item.companyName}}</span>
            <span>{{item.feedback | feedback}}</span>
            <span>{{parseTime(new Date(item.applyTime) , '{y}-{m}-{d}')}}</span>
            <span style="cursor: pointer;" @click="del(item.id , index)">删除</span>
        </dd>

        <dd v-if="list.length == 0" class="no-data">
            <span>暂无数据</span>
        </dd>
    </dl>

    <div class="tool" v-if="list.length > 0">
        <label for="checkbox">
            <input type="checkbox" @click="checkAll" id="checkbox" v-model="checked">全选
        </label>
        <button @click="delAll">删除</button>
    </div>
 
    <el-pagination
        background
        prev-text="上一页" 
        next-text="下一页" 
        layout="prev, pager, next"
        v-if="list.length > 0"
        @current-change="curPage"
        :page-size="page.count"
        :total="page.total">
    </el-pagination>
</div>
</template>

<script>
import { appliedposition, appliedposition_del, appliedposition_ids_del } from '@/api/me/account'
export default {
    name: "jobManage",
    data() {
        return {
            activeName: '1',
            tabIndex: 0,
            tabState: 1,
            list:[],
            checked:false, //是否全选
            checkModel:[], //双向数据绑定的数组，我是用的id
            req:{
                limit: 10,
                page: 1
            },
            page:{},
        };
    },
    filters:{
        // （个人）投递反馈 -2（暂不符合）；-1不合适（暂不符合）；0:待查阅；1（待面试）；2待复试；3面试通过
        feedback(val){
            let status;
            switch(val){
                case -2:
                    status = '暂不符合'
                    break;
                case -1:
                    status = '暂不符合'
                    break;
                case 0:
                    status = '待查阅'
                    break;
                case 1:
                    status = '待面试'
                    break;
                case 2:
                    status = '待复试'
                    break;
                case 3:
                    status = '面试通过'
                    break;
                default:
                    status = '待查阅'
                    break;
            }
            return status;
        }
    },
    watch:{
        checkModel(){
    　　　　if(this.checkModel.length==this.list.length){
    　　　　　　this.checked=true;
    　　　　}else{
    　　　　　　this.checked=false;
    　　　　}
    　　},
        req:{
            handler(newVal, oldVal) {
                this.init();
            },
            immediate: true,
            deep: true
        },
    },
    methods:{
        curPage(e){
            this.req.page = e;
        },
        checkAll(){
    　　　　if(this.checked){
    　　　　　　this.checkModel=[];
    　　　　}else{
    　　　　　　this.list.forEach((item)=>{
        　　　　　　if(this.checkModel.indexOf(item.id)==-1){
        　　　　　　　　this.checkModel.push(item.id)
        　　　　　　}
    　　　　　　})
    　　　　}
    　　},
        init(){
            appliedposition(this.req).then(res => {
                if(res.code == 0){
                    this.list = res.data;

                    for (let i = 0; i < res.data.length; i++) {
                        this.list[i].visible = false
                    }

                     //分页部分
                    this.page.crr_page = this.req.page;
                    this.page.pages = res.pages; // 总页码
                    this.page.count = res.count; //每页显示
                    this.page.total = res.total; //总条数
                    this.page.hasPrevious = res.hasPrevious; //是否有上一页
                    this.page.hasNext = res.hasNext; //是否有下一页
                }
            }).catch(err => {
                console.log(err)
            })
        },

        del(id, index){
            this.$confirm('此操作将删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                appliedposition_del(id).then(res => {
                    if(res.resp_code == 0){
                        this.list.splice(index, 1);
                        this.msgSuccess(res.resp_msg);
                    }
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => {
                //this.msgInfo('已取消删除')
            });
        },

        delAll(){
            appliedposition_ids_del(this.checkModel).then(res => {
                if(res.resp_code == 0){
                    this.msgSuccess(res.resp_msg);
                    this.init();
                }
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

>>>.el-tabs__nav{
    height: 40px;
}
>>>.el-tabs__item {
    height: 28px;
    font-size: 16px;
    font-weight: 400;
    color: #787878;
    padding: 0 12px;
}
>>>.el-tabs__item.is-active{
    color: #3EABC4;
}
>>>.el-tabs__nav-wrap::after{
    height: 1px;
}
>>>.el-tabs__active-bar{
    background-color: #3EACC4;
}
.account{
    float: right;
    width: 970px;
    height: 840px;
    padding: 30px 35px;
    background-color: #fff;
    color: #787878;
    position: relative;
}
.tab-nav{
    border-bottom: 1px solid #E8E8E8;
    span{
        cursor: pointer;
        display: inline-block;
        height: 28px;
        font-size: 16px;
        font-weight: 400;
        color: #787878;
        margin-right: 20px;
        &.active{
            font-weight: bold;
            color: #3EABC4;
            border-bottom: 2px solid #3EACC4;
        }
    }
}
.tab-content{
    margin-top: 10px;
    font-size: 14px;
    color: #787878;
    height: 740px;
    dl{
        dt{
            width: 900px;
            height: 50px;
            line-height: 50px;
            background: #F7F7F7;
        }
        
        dd{
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #E8E8E8;
            overflow: hidden;
            span{
                display: block;
                float: left;
                &:nth-child(1){
                    width: 22px;
                    height: 22px;
                    margin-right: 5px;
                    margin-top: 6px;
                }
            }
        }

        dt, dd{
            span{
                display: block;
                float: left;
                &:nth-child(1){
                    width: 22px;
                    height: 22px;
                    margin-right: 5px;
                }
                &:nth-child(2){
                    width: 180px;
                }
                &:nth-child(3){
                    width: 300px;
                }
                &:nth-child(4){
                    text-align: center;
                    width: 170px;
                }
                &:nth-child(5){
                    text-align: center;
                    width: 120px;
                }
                &:nth-child(6){
                    text-align: center;
                    width: 100px;
                }
            }
            &.no-data{
                span{
                    width: 100% !important;
                    height: 50px;
                    text-align: center;
                }
            }
        }
    }
    ul{
        margin-top: 25px;
        overflow: hidden;
        li{
            position: relative;
            width: 440px;
            height: 130px;
            border: 1px solid #E8E8E8;
            border-radius: 4px;
            overflow: hidden;
            float: left;
            margin-top: 5px;
            margin-bottom: 20px;
            .icon{
                margin: 28px 22px;
                width: 74px;
                height: 74px;
                background: #FFFFFF;
                // border: 1px solid #E8E8E8;
                float: left;
                margin-right: 15px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .office{
                float: left;
                margin-top: 22px;
                .title{
                    color: #121212;
                    font-size: 16px;
                    line-height: 40px;
                }
                .salary{
                    color: #787878;
                    margin-bottom: 7px;
                }
                .depict{
                    font-size: 14px;
                    font-weight: 400;
                    color: #3EABC4;
                }
            }

            &:nth-child(2n){
                float: right;
            }

            &:hover{

                background: #FFFFFF;
                border: 1px solid #E8E8E8;
                box-shadow: 1px 4px 13px 0px #E6E6E6;
                border-radius: 2px;
                i{
                    display: block;
                }
            }

            i{
                cursor: pointer;
                display: none;
                position: absolute;
                top: 15px;
                right: 15px;
                width: 10px;
                height: 10px;
                background: url(../../../assets/image/icon-del.png) no-repeat;
            }
        }
    }

    .tool{
        margin-top: 45px;
        label{
            font-weight: 400;
            margin-right: 10px;
        }
        input{
            margin-bottom: -6px;
            margin-right: 5px;
        }
        button{
            width: 88px;
            height: 32px;
            background: #3EACC4;
            border-radius: 4px;
            outline: none;
            border: 0;
            color: #fff;
            margin-left: 10px;
            cursor: pointer;
        }
    }

    >>>.el-pagination{
        // margin-top: 50px;
        // margin-bottom: 80px;
        text-align: center;
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%);

        button{
            cursor: pointer;
            outline: none;
            width: 70px;
            height: 30px;
            background: #FFFFFF;
            border: 1px solid #EBEBEB;
            border-radius: 4px;
            font-size: 14px;
            color: #777777;
            margin-left: 5px;
            margin-right: 5px;
            font-weight: 400;
            &:disabled{
                color: #BBBBBB;
            }
        }

        .el-pager{
            .number{
                background: #FFFFFF;
                border: 1px solid #EBEBEB;
                font-weight: normal;
                width: 30px;
                height: 30px;
                color: #777777;
                &.active{
                    background: #3DABC4;
                    border-radius: 4px;
                    color: white;
                }
            }
        }

    }

}

</style>